<!-- 成交方式 -->
<template>
  <div class="page-container">
    <div class="in-container">
      <div class="header_search">
        <div class="main_body">
          <div class="code_mode">
            <label for="code">代码：</label>
            <el-input
              id="code"
              v-model="code"
              style="width: 175px"
              clearable
            />
          </div>

          <div class="chineseName">
            <label for="chineseName">中文名称：</label>
            <el-input
              id="chineseName"
              v-model="chineseName"
              style="width: 175px"
              clearable
            />
          </div>

          <div class="englishName">
            <label for="englishName">英文名称：</label>
            <el-input
              id="englishName"
              v-model="englishName"
              style="width: 175px"
              clearable
            />
          </div>

          <div class="xingzhi">
            <label for="xingZhi">性质：</label>
            <el-select
                id="xingZhi"
                v-model="value"
                clearable
                placeholder=""
                style="width: 100px"
            >
                <el-option
                v-for="item in options"
                :key="item.value"
                :label="item.label"
                :value="item.value"
                />
            </el-select>
          </div>

          <div class="isDisable">
            <label for="isDisable">启用/禁用：</label>
            <el-select
                id="isDisable"
                v-model="value"
                clearable
                placeholder=""
                style="width: 100px"
            >
                <el-option
                v-for="item in options"
                :key="item.value"
                :label="item.label"
                :value="item.value"
                />
            </el-select>
          </div>
        </div>
      </div>
      <div class="in_container">
        <div class="title">
            <h3>成交方式列表</h3>
            <div class="btns">
                <button>新增</button>
                <button>启用</button>
                <button>禁用</button>
            </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { defineComponent } from "vue";
export default defineComponent({
    data() {
        return {
            code: '',
            chineseName: '',
            englishName: '',
            xingZhi: '',
            value: '',
            options: [
                {
                    value: 'Option1',
                    label: 'Option1',
                },
                {
                    value: 'Option2',
                    label: 'Option2',
                },
                {
                    value: 'Option3',
                    label: 'Option3',
                },
                {
                    value: 'Option4',
                    label: 'Option4',
                },
                {
                    value: 'Option5',
                    label: 'Option5',
                },
            ]
        }
    }
});
</script>

<style lang="scss" scoped>
.btn-area {
  margin-bottom: 8px;
}
.header_search {
    display: flex;
    height: 50px;
    align-items: center;
    justify-content: center;
    .main_body {
        display: flex;
        label {
            margin-left: 30px        
        }
    }
}
.in_container {
    height: 92%;
    border: 1px solid #e4e7ed;
    border-radius: 5px;
    .title {
        display: flex;
        width: 100%;
        height: 50px;
        line-height: 50px;
        background-color: #f9f9f9;
    }
}
</style>
